@mixin hoverShow($width: 300px, $line-height: 30px) {
  background-color: red;
  color: yellow;
  font-size: 16px;
  width: $width;
  line-height: $line-height;
}

$smallBorder: 1px solid red;
.box {
  @include hoverShow(600px);
  border: $smallBorder;
}

// \可以给指定参数赋值

.box {
  @include hoverShow($line-height: 1000px);
}

// 剩余参数
@mixin zzz($args...) {
  box-shadow: $args;
}

.z1 {
  @include zzz(1px, 2px, 3px, 10px, red);
}

// 像混入中添加额外内容 类似插槽 使用@content导出

@mixin other($width: 100px) {
  div {
    width: 2200px;
    @content;
  }
}

@include other {
  p {
    height: 200px;
    background-color: red;
  }
}
